<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示所有账户</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <input TYPE="button" value="添加"  @click="add()"/>
    <table border="1" cellpadding="0" width="400px" align="center">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>money</th>
            <th>操作</th>
        </tr>
        <tr v-for="(account,index) in accountList">
            <td v-html="account.id"></td>
            <td v-html="account.name"></td>
            <td v-html="account.money"></td>
            <td>
                <input type="button" value="删除" @click="deleteById(account.id)">
                <input type="button" value="修改" @click="updateById(account.id)">
            </td>
        </tr>
    </table>
</div>
<script TYPE="text/javascript">
    new Vue({
       el:"#app",
        data:{
           url:"addAccount.html",
           accountList:[]
        },
        methods:{
           findAll(){
                axios.get("/account/findAll").then(response=>{
                    alert(response.data.result);
                    this.accountList=response.data.result;
                }).catch(error=>{
                    console.log(error)
                })
           },
            deleteById(id){
               axios.get("/account/"+id).then(response=>{
                   alert(id+"删除成功")
                   if (response.data.flag) {
                       this.findAll()
                   }
               }).catch(error=>{
                   console.log(error);
               })
            },
            add(){
               location.href="/addAccount.html"
            },
            updateById(){
               axios.get("/account/").then(response=>{

               })
            }
        },
        created(){
           this.findAll();
        }
    });
</script>

</body>
</html>